<template>
	<div class="bghome">
		<div class="home_content">
			<div class="home_title">
				<img class="home_title_img" src="/static/images/card/home.png" alt="">
				<div class="home_title_t">家庭成员列表</div>
			</div>
			<div class="add" @click="total < 3 ? add_body() : ''">{{total < 3 ? '+添加家庭成员' : '全部成员'}}</div>
			<!-- 列表数据 -->
			<div class="home" v-for="(item, index) in cardList" :key="index">
				<div class="home_detail">
					<img class="home_img" src="/static/images/card/body.png" alt="">
					<div class="home_middle">
						<div class="home_name" @click="to_detail(item)">
							<div class="home_name_t">{{item.realName}}</div>
							<u-icon name="eye" size="16" color="#588BF3" />
						</div>
						<div class="home_identity">
							<div class="home_identity_t">{{item.principalCardRelation}}</div>
							<div @click="delOpen(item.id)">
								<u-icon name="trash" size="14" color="#999" label="删除" labelColor="#999"
									labelSize="24rpx" />
							</div>
						</div>
					</div>
					<u-icon name="arrow-right" size="18" color="#999" bold
						@click="to_interest(item.cardNum,item.cardType,item.maturityTime)" />
				</div>
			</div>
			<!-- 没数据时 -->
			<div class="no_listed" v-if="noListShow">
				<img class="no_list_img"
					src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/0a7dac16a5734e269148fe7a749b0243.png"
					alt="" />
				<div>暂无成员，请先添加！</div>
			</div>
		</div>
		<u-popup :show="show" @close="close" :round="10" mode="center">
			<div class="body">
				<div class="body_t">
					<div class="body_bg"></div>
					<span>成员信息</span>
				</div>
				<div class="body_detail">
					<div class="body_detail_t">成员关系：{{userDetails.principalCardRelation}}</div>
					<div class="body_detail_t">姓名：{{userDetails.realName}}</div>
					<div class="body_detail_t">手机号：{{userDetails.phone}}</div>
					<div class="body_detail_t">身份证号：{{userDetails.idCard || '--'}}</div>
					<div class="body_detail_t">详细地址：{{userDetails.addressInfo || '--'}}</div>
				</div>
			</div>
		</u-popup>
	</div>
</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig.js";
	export default {
		name: "myInterest",
		data() {
			return {
				show: false,
				cardList: [],
				userDetails: {},
				noListShow: false,
				total: '0'
			};
		},
		onLoad(options) {
			this.cardId = options.cardId;
			this.getList(this.cardId);
		},
		onShow() {
			this.getList(this.cardId);
		},
		methods: {
			to_detail(item) {
				const data = JSON.stringify(item);
				this.userDetails = JSON.parse(data);
				this.show = true;

			},
			close(){
				this.show = false;
			},
			getList(cardId) {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this;
				uni.request({
					url: baseUrl + '/customer/d_card_h5/web/listMembersToCardD',
					method: "POST",
					header: {
						Authorization: token
					},
					data: {
						pageSize: '100',
						pageNum: '1',
						equityCardId: cardId,
					},
					success(res) {
						that.cardList = res.data.data.rows
						that.total = res.data.data.total
						if (!that.cardList.length) {
							that.noListShow = true
						}
					},
				});
			},
			//添加用户
			add_body() {
				this.$u.route({
					url: "/pages_card/addBody/index",
					params: {
						cardId: this.cardId,
					}
				})
			},
			delOpen(id) {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this;
				uni.showModal({
					title: "",
					content: "确定要删除该成员吗？",
					success({
						confirm,
						cancel
					}) {
						if (confirm) {
							uni.request({
								url: baseUrl + '/customer/d_card_h5/web/delMembersToCardD/' + id,
								method: "DELETE",
								header: {
									Authorization: token
								},
								data: {
									cardId: id
								},
								success(res) {
									uni.$u.toast("删除成功！");
									that.getList(that.cardId);
								},
							});
						}
					},
				});
			},
			//查看权益
			to_interest(cardNum, cardType, maturityTime) {
				this.$u.route({
					url: "/pages_card/interest/index",
					params: {
						cardNum: cardNum,
						cardType: cardType,
						maturityTime: maturityTime
					}
				})
			},
		},
	};
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.home_content {
		display: inline-block;
		width: 100%;
		/* height: 100vh; */
		/* box-sizing: border-box; */
		vertical-align: middle;
		cursor: pointer;
		background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/1a65b8ce4201488f8567128ae503752c.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.bghome {
		display: inline-block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		vertical-align: middle;
		cursor: pointer;
		background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/1a65b8ce4201488f8567128ae503752c.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.home_title {
		padding: 1.625rem 1.625rem 0;
		/* height: 1.875rem; */
		display: flex;
		align-items: center;
	}

	.home_title_img {
		width: 1.5rem;
		height: 1.5rem;
	}

	.home_title_t {
		font-size: 1rem;
		color: #FFFFFF;
	}

	.home {
		padding: 0 1.25rem;
	}

	.home_detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 4.4375rem;
		padding: .5625rem 1.4375rem .5625rem .9375rem;
		background: #FFFFFF;
		border-radius: .625rem;
		margin-bottom: 1.25rem;
	}

	.home_img {
		width: 2.25rem;
		height: 2.25rem;
	}

	.home_middle {
		width: 100%;
		padding: 0 1.4375rem 0 1.3125rem;
	}

	.home_name {
		display: flex;
		align-items: center;
	}

	.home_name_t {
		font-size: 1.25rem;
		color: #333333;
	}

	.home_identity {
		margin-top: .875rem;
		display: flex;
		justify-content: space-between;
	}

	.home_identity_t {
		font-size: 0.875rem;
		color: #666666;
	}

	.add {
		font-size: 14px;
		color: #FFFFFF;
		text-align: end;
		padding: 0 1rem .5rem 0;
	}

	.body {
		background: #fff;
		width: 18rem;
		color: #333;
		font-size: 1rem;
		padding: 1rem;
		height: 100%;
		box-sizing: border-box;
	}

	.body_bg {
		margin-right: 0.25rem;
		width: 0.25rem;
		height: 1.0625rem;
		background: #FF8A00;
		border-radius: 200px 200px 200px 200px;
	}

	.body_t {
		display: flex;
		align-items: center;
		font-size: 1rem;
		color: #333333;
		font-weight: bold;
	}

	.body_detail {
		margin-top: 0.5rem;
	}

	.body_detail_t {
		font-size: 1rem;
		color: #333;
		margin-top: 0.25rem;
	}

	.no_listed {
		margin: 10rem auto;
		font-size: 0.75rem;
		font-weight: bold;
		color: #999999;
		text-align: center;
	}

	.no_list_img {
		width: 10.625rem;
		height: 4.375rem;
	}

	.delBody {
		background: #fff;
		width: 14rem;
		color: #333;
		font-size: 1.25rem;
		padding: 1rem;
		height: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	.delBtn {
		display: flex;
		justify-content: space-around;
		margin-top: 1.5rem;
		font-size: 1rem;
	}
</style>